<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
       *{
           margin:0;
           padding:0;
        }
        #outer
        {
            width:600px;/*宽度设置为600个像素*/
            margin:50px auto;/*距离顶端个像素 默认居中*/
            background-color:yellow;/*背景颜色设置为黄色*/
            padding:10px;/*向四周扩大十个像素距离*/
            text-align:center;/*设置文本居中*/
        }
    </style>

    <script type="text/javascript">
    window.onload=function()
    {
        //点进按钮切换图片
        //获取两个按钮
        var previous=document.getElementById("previous");
        var next=document.getElementById("next");
        //获取img标签
        var img=document.getElementsByTagName("img")[0];//序号0表示第一个img 序号1表示第二个img
        console.log(img);
        //创建一个图片数组
        var imgArr=["../伊蕾娜素材/图一.jpeg","../伊蕾娜素材/图二.jpg","../伊蕾娜素材/图三.jpg","../伊蕾娜素材/图四.jpg","../伊蕾娜素材/图五.jpg","../伊蕾娜素材/图六.jpg","../伊蕾娜素材/图七.jpg","../伊蕾娜素材/图八.jpg","../伊蕾娜素材/图九.png","../伊蕾娜素材/图十.jpg"];
        console.log(imgArr);
        //创建一个变量，来表示当前变量的索引
        var index=0;
        //设置提示文字
        //获取id为info的p元素
        var info=document.getElementById("info");
        info.innerHTML="一共"+imgArr.length+"张图片，当前是第"+(index+1)+"张";
        //再分别为两个按钮设置一个单击响应函数
        previous.onclick=function()
        {
            //切换图片就是修改img的src属性
            //img.src="../伊蕾娜素材/音乐播放器版.jpg";这样可以切换图片，但是只能切换到指定的图片
            //img.src=imgArr[0];//此方法改编了图片的使用，但是图片切换还是固定的
            index--;
            if(index<0)
            {
                index=imgArr.length-1;
            }
            img.src=imgArr[index];
            info.innerHTML="一共"+imgArr.length+"张图片，当前是第"+(index+1)+"张";
        };
        next.onclick=function()
        {
            //img.src="../伊蕾娜素材/CDKeyWizard.jpg";这样可以切换图片，但是只能切换到指定的图片
            index++;
            if(index>imgArr.length-1)
            {
                index=0;
            }
            img.src=imgArr[index];
            info.innerHTML="一共"+imgArr.length+"张图片，当前是第"+(index+1)+"张";
        };
    }
    </script>
</head>
<body>
    <div id="outer">
        <p id="info"></p>
        <img src="../伊蕾娜素材/图一.jpeg" alt="伊蕾娜03" height="600px" width="600px">
        <button id="previous">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
</html>